<template>
    <el-menu-item :index="sub.to" v-if="sub.type == 0">
        <el-icon :size="20"><icon :icon="sub.icon"></icon> </el-icon>
        <template #title>{{ $t(sub.title) }}</template>
    </el-menu-item>
    <el-sub-menu :index="sub.to" v-else>
        <template #title>
            <el-icon :size="20"><icon :icon="sub.icon" /></el-icon>
            <span>{{ $t(sub.title) }}</span>
        </template>
        <Amenu :sub="item" v-for="item in sub.submenu" :key="item"></Amenu>
    </el-sub-menu>
</template>
<script lang="ts">
export default {
    // name: "Amenu",
};
</script>
<script setup lang="ts">
// const getIcon = (str: string): string[] => {
//     let pattern = /([A-Z])(.*?)(?=[A-Z]|$)/g;
//     let result = str.match(pattern)!;
//     return [result[1], result.splice(2).join("")];
// };

const props = defineProps({
    sub: {
        type: Object,
        default: []
    }
});
const sub: any = props.sub;
</script>
<style scoped lang="scss">
.el-menu-item {
    &:hover {
        background-color: rgba(#000, $alpha: 0);
    }
    &.is-active {
        background-color: var(--theme-color);
    }
}
</style>
